<!-- 热门视频 -->
<template>
  <div style="padding: 20px">
    <!--<el-radio-group v-model="searchOption">
      <el-radio :label="1">视频标题或简介</el-radio>
      <el-radio :label="2">视频标签</el-radio>
      <el-radio :label="3">视频评论</el-radio>
    </el-radio-group>-->
    <!--<div class="margin-top-20">
      <el-input
        placeholder="请输入查询内容"
        v-model="searchText"
        style="width: 50%"
      >
      </el-input>
      <el-button>搜索视频</el-button>
      <el-button @click="clickShowMore">{{
        showMore ? "收起条件" : "搜索条件"
      }}</el-button>
    </div>-->
    <!--<div style="margin-top: 10px">
      *支持多个关键词组合搜索，示例：绿茶
      语录（用空格隔开关键词，搜索的视频中将同时包含这些关键词）
    </div>-->
    <div v-if="showMore">
      <!--<div class="margin-top-20">
        一级分类：
        <el-radio-group v-model="classify">
          <el-radio-button
            v-for="(item, key) in classifyOptions"
            :label="item"
            :key="key"
          ></el-radio-button>
        </el-radio-group>
      </div>-->
      <div class="margin-top-20">
        <!--<span class="searchSelect">
          播放数：<el-select v-model="playOption" placeholder="不限">
            <el-option
              v-for="item in playSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <span class="searchSelect">
          点赞数：<el-select v-model="favorOption" placeholder="不限">
            <el-option
              v-for="item in dianzanSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <span class="searchSelect">
          视频时长：<el-select v-model="timeOption" placeholder="不限">
            <el-option
              v-for="item in shichangSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <span class="searchSelect">
          自制视频：<el-select v-model="selfvideoOption" placeholder="不限">
            <el-option
              v-for="item in zizhiSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>-->
      </div>
      <div class="margin-top-20">
        <!--<span class="searchSelect">
          男女比例：<el-select v-model="genderOption" placeholder="不限">
            <el-option
              v-for="item in genderSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <span class="searchSelect">
          <el-checkbox v-model="relatedActivityOption">关联活动</el-checkbox>
        </span>
        <span class="searchSelect">
          <el-checkbox v-model="teamVideoOption">团队视频</el-checkbox>
        </span>
        <span class="searchSelect">
          <el-checkbox v-model="brandSupportOption">品牌赞助</el-checkbox>
        </span>-->
      </div>
    </div>
    <!-- 显示结果 -->
    <div
      class="margin-top-20"
      style="display: flex; justify-content: space-between"
    >
      <!--<span>
        <el-radio-group v-model="pageOrder">
          <el-radio-button
            v-for="(item, key) in pageOrderOptions"
            :label="item"
            :key="key"
          ></el-radio-button>
        </el-radio-group>
      </span>
      <span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-radio-group v-model="lastDays">
          <el-radio-button
            v-for="(item, key) in lastDaysOptions"
            :label="item.value"
            :key="key"
            >{{ item.label }}</el-radio-button
          >
        </el-radio-group>
      </span>-->
    </div>
    <paged-result />
  </div>
  
</template>

<script>
import PagedResult from "./components/PagedResult.vue";

export default {
  name: "",
  data: function () {
    return {
      showMore: true,
      searchOption: 1, // 数值类型
      searchText: "",
      classify: "全部",
      playOption: "不限",
      favorOption: "不限",
      timeOption: "不限",
      selfvideoOption: "不限",
      genderOption: "不限",
      relatedActivityOption: true,
      teamVideoOption: true,
      brandSupportOption: true,
      pageOrder: "综合排序",
      dateRange: "",
      lastDays: "3",
      classifyOptions: [
        "全部",
        "时尚",
        "生活",
        "美食",
        "动画",
        "音乐",
        "舞蹈",
        "游戏",
        "知识",
        "数码",
        "资讯",
        "鬼畜",
        "广告",
        "娱乐",
        "影视",
        "番剧",
        "国创",
        "纪录片",
        "电影",
        "电视剧",
      ],

      playSelectOptions: [
        { label: "不限", value: "不限" },
        { label: "少于100万", value: "100w" },
      ],
      dianzanSelectOptions: [
        { label: "不限", value: "不限" },
        { label: "少于100万", value: "100w" },
      ],
      shichangSelectOptions: [{ label: "不限", value: "不限" }],
      zizhiSelectOptions: [{ label: "不限", value: "不限" }],
      genderSelectOptions: [{ label: "不限", value: "不限" }],
      pageOrderOptions: [
        "综合排序",
        "播放最多",
        "点赞最多",
        "收藏最多",
        "评论最多",
        "弹幕最多",
        "投币最多",
        "分享最多",
      ],
      lastDaysOptions: [
        { label: "24小时", value: 1 },
        { label: "最近3天", value: 3 },
        { label: "最近7天", value: 7 },
        { label: "最近30天", value: 30 },
        { label: "最近90天", value: 90 },
      ],
    };
  },

  components: { PagedResult },
  //components: {},

  computed: {},

  mounted: function () {},

  methods: {
    clickShowMore() {
      this.showMore = !this.showMore;
    },
  },
};
</script>
<style lang="scss" scoped>
.searchSelect {
  margin-right: 20px;
}
</style>
